<template>
  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :append-to-body="true" :close-on-click-modal="false">
    <el-row>
      <div class="filter-container">
        <div class="filter-item">
          <span class="span">模型目录:</span>
          <el-cascader v-model="temp.directory_id" :options="treeList" :props="treeProps" :show-all-levels="false" label="name" change-on-select clearable style="width: 100%" />
        </div>

      </div>

      <el-table ref="table" :key="tableKey" v-loading="listLoading" element-loading-text="正在加载，请稍后" :data="list" border fit highlight-current-row style="width: 100%;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="50" label="序号" align="center" />
        <el-table-column label="信息项名称" align="center" min-width="150px">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="英文名称" align="center" min-width="150px">
          <template slot-scope="{row}">
            <span>{{ row.engName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="简称" align="center" min-width="150px">
          <template slot-scope="{row}">
            <span>{{ row.shortName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="数据类型" align="center" min-width="150px">
          <template slot-scope="{row}">
            <span>{{ row.dataType | dictLabel('mysql_data_type') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="长度" align="center" min-width="150px">
          <template slot-scope="{row}">
            <span>{{ row.dataSize }}</span>
          </template>
        </el-table-column>
        <el-table-column label="同义词" align="center" min-width="150px">
          <template slot-scope="{row}">
            <span>{{ row.synonym }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" min-width="150px">
          <template slot-scope="{row}">
            <span>{{ row.status|dictLabel('is_use')}}</span>
            <!-- <el-switch class="tableScopeSwitch" :width="width" v-model="row.status" :active-value="1"
                  :inactive-value="0" active-text="启用" :inline-prompt="true" inactive-text="禁止" @change="changeType(row)" /> -->
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" align="center" min-width="230" class-name="small-padding fixed-width">
              <template slot-scope="{row}">
                <el-button v-permission="['standardsystem:ModelSpecification:update']" type="text" size="small"
                  icon="el-icon-edit" @click="handleUpdate(row)">
                  {{ $t('table.edit') }}
                </el-button>
                <el-button v-permission="['standardsystem:ModelSpecification:delete']" type="text" size="small"
                  icon="el-icon-delete" class="delete-text-btn" @click="handleDelete(row)">
                  {{ $t('table.delete') }}
                </el-button>
              </template>
            </el-table-column> -->
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" :page-sizes="pageArray" @pagination="getList" />

    </el-row>
  </el-dialog>
</template>

  <script>
// import { fetchMasterdataDirectoryList } from '@/api/masterdata/masterdataDirectory'
import { deleteModelSpecification, fetchModelSpecificationList, useAndStop, fileDown } from '@/api/standardsystem/modelSpecification'
import { fetchMasterdataDirectoryList, createMasterdataDirectory, updateMasterdataDirectory, getMasterdataDirectory, deleteMasterdataDirectory } from '@/api/masterdata/masterdataDirectory'
import waves from '@/directive/waves' // waves directive
import permission from '@/directive/permission/permission'
import Pagination from '@/components/Pagination'

export default {
  name: 'ModelSpecificationList',
  components: { Pagination },
  directives: { waves, permission },
  data() {
    return {
      tableKey: 0,
      treeList: [],
      treeProps: {
        emitPath: false,
        checkStrictly: true,
        value: 'id',
        label: 'name',
      },
      list: null,
      total: 0,
      multipleSelection: [],
      listLoading: true,
      pageArray: this.$store.getters.pageArray,
      listQuery: {
        name: undefined,
        ancestralId: '2',
        page: 1,
        limit: this.$store.getters.defaultPageSize,
      },
      textMap: {
        update: '编辑',
        create: '新建',
      },

      temp: {},
      dialogFormVisible: false,
      dialogStatus: '',
      activeName: 'first', //tarbar
      directoryId: '', //选中目录ID
      value: '',
      true: true,
      width: 100,
    }
  },
  computed: {
    ids() {
      const ids = []
      this.multipleSelection.forEach((ele) => {
        ids.push(ele.id)
      })
      return ids.join(',')
    },
  },
  created() {
    this.getTreeList()
    this.getList()
  },
  methods: {
    handleClick(val) {
       
    },
    getTreeList() {
      this.listLoading = true
      fetchMasterdataDirectoryList(this.listQuery).then((response) => {
        if (response.data.code === 200) {
          this.treeList = response.data.data
          this.listLoading = false
          // this.$refs.form.setList(this.treeList)
        } else {
          this.$message.error(response.data.msg)
        }
        this.listLoading = false
      })
    },
    getListByTreeId(data) {
      this.listQuery.directory_id = data.id
      this.getList()
    },
    getList() {
      this.listLoading = true
      fetchModelSpecificationList(this.listQuery).then((response) => {
        if (response.data.code == 200) {
          this.list = response.data.data.records
          this.total = response.data.data.total
          this.listLoading = false
        } else {
          this.$message.error(response.data.msg)
          this.listLoading = false
        }
      })
    },
    handleCreate() {
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    },
    handleUpdate(row) {},
    handleDelete(row) {
      this.$confirm('确定删除该数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {})
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
  },
}
</script>
  <style lang="scss">
#treeBox {
  margin-top: 1px;

  .el-table thead {
    display: none;
  }
}

.tableScopeSwitch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}

/*打开时文字位置设置*/
.tableScopeSwitch .el-switch__label--right {
  z-index: 1;
  right: 6px;
}

/*关闭时文字位置设置*/
.tableScopeSwitch .el-switch__label--left {
  z-index: 1;
  left: 6px;
}

/*显示文字*/
.tableScopeSwitch .el-switch__label.is-active {
  display: block;
}

.tableScopeSwitch.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 60px !important;
  /*开关按钮的宽度大小*/
}
.span {
  color: #606266;
  font-weight: 700;
  font-size: 14px;
}
</style>
